import ConfirmModal from '@/components/ConfirmModal';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { useRef, useState } from 'react';
import { queryDingRobots, removeDingRobot } from '../service';
import type { DingRobotsTableItem } from '../typings.d';
import CreateDingRobot from './components/CreateDingRobot';
import UpdateDingRobot from './components/UpdateDingRobot';

const DingRobotList = () => {
  const [currRobot, setCurrRobot] = useState<DingRobotsTableItem | null>(null);
  const [visible, setVisible] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<DingRobotsTableItem>[] = [
    {
      title: 'id',
      hideInSearch: true,
      hideInTable: true,
      dataIndex: '_id',
    },
    {
      title: '所属用户',
      dataIndex: 'ownerId',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '钉钉机器人名',
      dataIndex: 'name',
      align: 'center',
    },
    { title: 'Webhook', dataIndex: 'webhook', ellipsis: true, hideInSearch: true },
    { title: 'Secret', dataIndex: 'secret', ellipsis: true, hideInSearch: true },
    {
      title: '描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      key: '_id',
      align: 'center',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      render: (_, record, x, action) => [
        <a
          key={record._id}
          onClick={() => {
            setCurrRobot(record);
            setVisible(true);
          }}
        >
          修改
        </a>,
        <ConfirmModal
          key={record._id}
          reload={() => action?.reload()}
          operFunc={async () => await removeDingRobot(record._id)}
          text={`确认要删除钉钉机器人 ${record.name} 吗？`}
        />,
      ],
    },
  ];

  return (
    <PageHeaderWrapper title={false} content="钉钉机器人列表">
      <ProTable<DingRobotsTableItem>
        columns={columns}
        rowKey="_id"
        actionRef={actionRef}
        search={{ labelWidth: 'auto' }}
        scroll={{ x: 1000 }}
        pagination={{
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        request={async (params, sort) => queryDingRobots(params, sort)}
        toolBarRender={(action) => [<CreateDingRobot key="_id" reload={() => action?.reload()} />]}
      />
      {visible && currRobot && (
        <UpdateDingRobot
          visible={visible}
          setUnvisible={() => {
            setCurrRobot(null);
            setVisible(false);
          }}
          reload={() => {
            actionRef.current?.reload();
          }}
          dingRobot={currRobot}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default DingRobotList;
